<template>
	<view class="instructions">
		<view :class="isExpand" class="instructions_body">
			<view class="py-1">
				<text class="bold">划线价格：</text> 是商品的专柜价、吊牌价、正品零售价、指导价、曾经展示过的销售价等，并非原价，仅供参考。
			</view>
			<view class="py-1">
				<text class="bold">未划线价格：</text>是商品的实时价格，不会因具体表述形式的差异改变行知。具体成交价格会因商品参加促销活动，优惠券积分抵扣等情形发生变化，最终以订单结算页面展示的价格为准。
			</view>
			<view class="py-1">
				商家详情页以图片或文字标注的一口价、促销价、优惠价等价格，可能是通过优惠券、积分折扣、满减或特定的促销活动，在特定时间段内容形成的价格，具体请以商家促销规则、优惠条件和结算页面的标价为准。此说明仅当出现价格比较时有效，若商家对商品的划线价做了特殊说明，则以特殊说明为准。
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				expandName: '展开',
				expand: true
			};
		},
		computed: {
			isExpand() {
				return !this.expand ? 'instructions_body_retract' : 'instructions_body_expand';
			}
		},
		methods: {
			onExpand() {
				this.expand = !this.expand;
				this.expandName = this.expand ? '收起' : '展开';
			}
		}
	};
</script>

<style lang="scss" scoped>
	.instructions {
		position: relative;
		background: $uni-bg-color;
		padding: $xj-standard-padding;
		font-size: $uni-font-size-base;
		color: #666666;
		letter-spacing: 1rpx;
		border-radius: $xj-standard-border-radius;
		.bold{
			font-weight: 600;
		}
		.instructions_btn {
			display: inline-block;
			padding: 2rpx 24rpx;
			border: 1px solid #4f4f4f;
			border-radius: $xj-standard-border-radius;
			position: absolute;
			bottom: 6rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: $uni-font-size-base;
			transition: all 0.3s ease-in-out;
		}

		.instructions_body {
			margin-bottom: 24rpx;
			overflow: hidden;
			transition: height 0.3s ease-in-out;
		}

		.instructions_body_retract {
			height: 5em;
		}

		.instructions_body_expand {
			height: auto;
		}
	}
</style>